<template>
  <el-card class="box-card">
    <div slot="header" class="clearfix"><span>回到顶部</span></div>
    <div>
      <el-collapse v-model="activeNames">
        <el-collapse-item title="组件状态" name="1">
          <el-form size="medium" label-width="100px">
            <el-form-item label="展示类型">
              <el-radio-group v-model="data.type">
                <el-radio :label="1">图标</el-radio>
                <el-radio :label="2">图片</el-radio>
              </el-radio-group>
              <div class="input_content">
                <el-form size="medium" label-width="100px" v-if="data.type == 1">
                  <el-form-item label="左侧图标">
                    <div class="icon_box">
                      <span class="hasIcon" v-show="data.icon != ''">
                        <i :class="data.icon"></i>
                        <i class="icon-abl-close el-icon-error" @click="removeIcon('left_icon')"></i>
                        <span class="choose_bar" @click="chooseIcon"><i class="txt">替换</i></span>
                      </span>
                      <span class="noIcon" v-show="data.icon == ''"><i class="el-icon-plus" style="color:#409EFF;" @click="chooseIcon"></i></span>
                    </div>
                  </el-form-item>
                  <el-form-item label="按钮大小">
                    <div class="slider_box">
                      <el-slider class="slider_item" :max="200" :min="10" v-model="data.width"></el-slider>
                      <el-input-number v-model="data.width" :controls="false" :min="10" :max="200"></el-input-number>
                    </div>
                  </el-form-item>
                </el-form>
                <el-form v-if="data.type == 2">
                  <el-form-item label="按钮图片">
                    <div class="img_box"><Upload :tempUrl="data.img" @input="getimg"></Upload></div>
                  </el-form-item>
                  <el-form-item label="按钮大小">
                    <div class="slider_box">
                      <el-slider class="slider_item" :max="200" :min="10" v-model="data.width"></el-slider>
                      <el-input-number v-model="data.width" :controls="false" :min="10" :max="200"></el-input-number>
                    </div>
                  </el-form-item>
                </el-form>
              </div>
            </el-form-item>
            <el-form-item label="按钮位置">
              <el-radio-group v-model="data.position">
                <el-radio label="lb">左下</el-radio>
                <el-radio label="rb">右下</el-radio>
              </el-radio-group>
              <div class="input_content">
                <el-form>
                  <el-form-item label="上下偏移">
                    <div class="slider_box">
                      <el-slider class="slider_item" :max="200" v-model="data.deviationa"></el-slider>
                      <el-input-number v-model="data.deviationa" :controls="false" :min="0" :max="200"></el-input-number>
                    </div>
                  </el-form-item>
                  <el-form-item label="左右偏移">
                    <div class="slider_box">
                      <el-slider class="slider_item" :max="150" v-model="data.deviationb"></el-slider>
                      <el-input-number v-model="data.deviationb" :controls="false" :min="0" :max="150"></el-input-number>
                    </div>
                  </el-form-item>
                </el-form>
              </div>
            </el-form-item>
            
          </el-form>
        </el-collapse-item>
      </el-collapse>
    </div>
  </el-card>
</template>

<script>
import Upload from '@/components/Upload/SingleImage2';
import Linkdiv from '@/components/Link/index';
export default {
  props: {
    data: {
      type: Object,
      default: {}
    }
  },
  data() {
    return {
      activeNames: ['1']
    };
  },
  components: {
    Upload,
    Linkdiv
  },
  methods: {
    getimg(img) {
      this.data.img = img;
    },
    selectlink(item) {
      this.$parent.showlinkselcet(item);
    },
    getAData(item) {
      this.data.link = item;
    },
    chooseIcon() {},
    removeIcon() {}
  }
};
</script>

<style lang="scss" scoped>
.link_div {
  width: 100%;
}
.img_box {
  width: 60px;
  height: 60px;
  display: flex;
}
.icon_box {
  width: 36px;
  height: 36px;
  line-height: 36px;
  text-align: center;
  cursor: pointer;
  border: 1px solid #dcdfe6;
  position: relative;

  .icon-abl-close {
    position: absolute;
    top: -6px;
    right: -9px;
    color: rgba(0, 0, 0, 0.3);
    font-size: 16px;
  }

  &:hover {
    .choose_bar {
      display: block;
    }
  }

  .choose_bar {
    display: none;
    position: absolute;
    bottom: 0;
    left: 0;
    font-size: 10px;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    line-height: 18px;
    text-align: center;
    width: 100%;

    i.txt {
      display: inline-block;
      font-style: normal;
      -webkit-transform: scale(0.75);
      transform: scale(0.75);
      letter-spacing: 2px;
    }
  }
}
</style>
